<template>
  <el-dialog v-if="visible" :visible="visible" width="500px" title="编辑作品" :append-to-body="true" :close-on-click-modal="false" @close="cancel">
    <el-form ref="form" v-loading="loading" :model="form" :rules="formRules" label-width="120px" label-position="left">
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" :clearable="true" placeholder="请输入作品名称" @clear="$refs.form.validateField(['name'])" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="form.sort" :clearable="true" placeholder="请输入排序" @clear="$refs.form.validateField(['sort'])" />
      </el-form-item>
      <el-form-item label="宣传图" prop="cover">
        <upload :file-list="cover" @on-update="coverUpdate" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="0">显示</el-radio>
          <el-radio :label="1">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button v-loading="loading" type="primary" @click="enter">确认</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { editOpus, opusDetails } from '@/api/actor'

export default {
  name: 'Edit',
  props: {
    visible: {
      type: Boolean,
      default: true
    },
    id: {
      type: String,
      default: '-1'
    },
    oid: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      loading: false,
      form: {
        oid: this.oid,
        performer_id: this.id,
        name: '',
        cover: '',
        status: 0,
        sort: ''
      },
      cover: [],
      formRules: {
        name: [
          {
            trigger: 'blur',
            validator(rule, value, callback) {
              if (typeof value !== 'string') {
                return callback(new Error('作品名称不能为空'))
              }
              if (value.trim().length === 0) {
                return callback(new Error('作品名称不能为空'))
              }
              return callback()
            }
          }
        ],
        cover: [
          {
            tirgger: 'blur',
            validator(rule, value, callback) {
              if ((typeof value) !== 'string') {
                return callback(new Error('宣传图不能为空'))
              }
              if (value.trim().length === 0) {
                return callback(new Error('宣传图不能为空'))
              }
              return callback()
            }
          }
        ],
        sort: [
          {
            trigger: 'blur',
            validator(rule, value, callback) {
              if (value.trim().length === 0) {
                return callback()
              }
              if (!/^\d+$/.test(value)) {
                return callback(new Error('请输入数值'))
              }
              return callback()
            }
          }
        ]
      }
    }
  },
  async mounted() {
    try {
      this.loading = true
      const opusDetailsRes = await opusDetails({ oid: this.oid })
      opusDetailsRes.data.sort = opusDetailsRes.data.sort.toString()
      this.form = opusDetailsRes.data
      this.cover = [{ url: opusDetailsRes.data.cover }]
      this.loading = false
    } catch (error) {
      this.$errorMessage()
      this.loading = false
      this.$emit('cancel')
    }
  },
  methods: {
    async enter() {
      try {
        await this.$refs.form.validate()
        try {
          this.loading = true
          const form = Object.assign({}, this.form)
          form.sort = form.sort.trim().length === 0 ? 0 : parseInt(form.sort.trim())
          form.oid = form.id
          await editOpus(form)
          this.loading = false
          this.$emit('enter')
        } catch (error) {
          this.$errorMessage()
          this.loading = false
        }
      } catch (error) {
        this.$errorMessage('表单输入有误')
      }
    },
    coverUpdate(fileList) {
      this.cover = fileList
      if (this.cover.length > 0) {
        this.form.cover = this.cover[0].url
      } else {
        this.form.cover = ''
      }
      this.$refs.form.validateField(['cover'])
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
